<template>
	<view class="page-wrapper">
		<div class="content">
			<div class="content-t">
				<div class="content-t-l">
					<image :src="info.headimgurl" mode="widthFix"></image>
				</div>
				<div class="content-t-r">
					<span v-text="info.truename"></span>
					<p v-text="(info.sex === 1 ? '女' : '男') + ' ' + info.birth"></p>
				</div>
			</div>
			<div class="content-c">
				<span>描述相符：</span>
				<div class="stars">
					<image @click="starsClickHandler(item.id)" v-for="item in stars" :src="item.flag === 0 ? starUrl : starCheckedUrl" mode="widthFix" ></image>
				</div>
				<p v-if="score === 1" >不满意</p>
				<p v-if="score === 2" >一般</p>
				<p v-if="score === 3" >满意</p>
				<p v-if="score === 4" >非常好</p>
			</div>
			<div class="content-b">
				<span>
					<image src="../../../static/img/member/comment/pen.png" mode="widthFix"></image>
					<p>本次保洁的情况怎么样，说出你的真实想法。</p>
				</span>
				<textarea v-model="content" placeholder="请输入" />
			</div>
		</div>
		<button @tap="submit">
			评价
		</button>
	</view>
</template>

<script>
	import {api} from '@/util/api.js';
	
	export default {
		
		data() {
			return {
				info: {},
				stars: [
					{ id: 1, flag: 0 },
					{ id: 2, flag: 0 },
					{ id: 3, flag: 0 },
					{ id: 4, flag: 0 }
				],
				score: 0,
				starUrl: '../../../static/img/member/comment/star.png',
				starCheckedUrl: '../../../static/img/member/comment/star-checked.png',
				order_id: 0,
				content: '',
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.getAuntInfo(options.id);
		},
		methods: {
			getAuntInfo(id) {
				api.getAuntInfo({
					id: id
				}, res => {
					this.info = res.data;
					this.info.headimgurl = this.$domain() + this.info.headimgurl;
				})
			},
			starsClickHandler( id ) {
				let index = this.stars.findIndex(item => {
					return item.id === id;
				});
				this.score = 0;
				if( this.stars[index].flag === 0 ) {
					for( let i = 0; i < index + 1; i++ ) {
						this.stars[i].flag = 1
					};
					for( let i = 0; i < this.stars.length; i++ ) {
						if(this.stars[i].flag === 1) {
							this.score += 1;
						}
					}
				} else {
					for( let i = index + 1; i < this.stars.length; i++ ) {
						this.stars[i].flag = 0
					}
					for( let i = 0; i < this.stars.length; i++ ) {
						if(this.stars[i].flag === 1) {
							this.score += 1;
						}
					}
				}
				
			},
			submit() {
				if( this.content === '') {
					uni.showToast({
						icon: "none",
						title: '请输入评价'
					});
					return;
				}
				api.commentAunt({
					id: this.order_id,
					point: this.score,
					content: this.content
				}, res => {
					if(res.code === 200) {
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		padding: 30rpx
	}
	.content {
		width: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.content-t {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.content-t-l {
		width: 132rpx;
		height: 132rpx;
	}
	.content-t-l>image {
		max-width: 100%;
		max-height: 100%;
	}
	.content-t-r {
		margin-left: 30rpx;
		color: #666666;
		font-size: 28rpx;
	}
	.content-t-r>span {
		
	}
	.content-t-r>p {
		margin-top: 10rpx;
	}
	.content-c {
		display: flex;
		align-items: center;
		margin-top: 30rpx
	}
	.content-c>.stars {
		display: flex;
		align-items: center;
	}
	.content-c>.stars>image {
		width: 36rpx;
		margin-left: 50rpx;
	}
	.content-c>.stars>image:first-child {
		margin-left: 30rpx;
	}
	
	.content-c>p {
		color: #999999;
		font-size: 20rpx;
		margin-left: 20rpx;
	}
	.content-b {
		margin-top: 60rpx;
	}
	.content-b>span {
		display: flex;
		align-items: center;
	}
	.content-b>span>image {
		width: 13.9rpx;
	}
	.content-b>span>p {
		font-size: 18rpx;
		color: #999999;
		margin-left: 15rpx;
	}
	.content-b>textarea {
		margin-top: 60rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 10rpx;
		height: 200rpx;
		width: 100%;
		font-size: 28rpx;
	}
	
	.page-wrapper>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin-top: 60rpx;
	}
	
</style>
